<template>
  <div class="project-detail-container">
    <div class="project-detail-title">{{projectName}}项目页面</div>
    <el-button class="project-detail-title-btn" type="primary" @click="addPage"><el-icon><Plus/></el-icon>新增页面</el-button>
    <el-button class="project-detail-title-btn" @click="exportProject">导出项目</el-button>
    <el-table class="project-detail-table" :data="pages">
      <el-table-column label="序号" type="index" width="60"/>
      <el-table-column label="页面标题" prop="title"/>
      <el-table-column label="路径" prop="url"/>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="text" size="small" @click="designPage(scope.row)">绘制</el-button>
          <el-button type="text" size="small" @click="editPage(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="deletePage(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="modifyDialogTitle" v-model="modifyDialogVisible" @close="handleCloseDialog">
      <el-form label-position="top">
        <el-form-item label="页面标题">
          <el-input v-model="modifyEntity.title"/>
        </el-form-item>
        <el-form-item label="路径">
          <el-input v-model="modifyEntity.url"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="modifyDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmModify">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {useRoute, useRouter} from "vue-router";
import {onMounted, reactive, ref} from "vue";
import {usePageStore} from "@/store/usePageStore";
import {Plus} from "@element-plus/icons-vue";
import type Page from "@/utils/page";
import {useProjectStore} from "@/store/useProjectStore";

const route = useRoute()

const pageStore = usePageStore()
const projectStore = useProjectStore();
const projectName = projectStore.getProjectById(route.query.id)?.name || '';

const pages = ref([] as Page[]);

const getList = () => {
  pages.value = pageStore.getProjectPages(route.query.id);
}

onMounted(() => {
  getList()
})

const modifyEntity = reactive({
  id: '',
  projectId: route.query.id,
  title: '',
  url: ''
})
const modifyDialogVisible = ref(false);
const modifyDialogTitle = ref("");

const addPage = () => {
  modifyDialogTitle.value = "新增页面";
  modifyDialogVisible.value = true;
}
const editPage = (page: Page) => {
  modifyDialogTitle.value = "编辑页面信息"
  modifyEntity.id = page.id
  modifyEntity.title = page.title
  modifyEntity.url = page.url
  modifyDialogVisible.value = true;
}
const handleCloseDialog = () => {
  modifyEntity.id = ''
  modifyEntity.title = ''
  modifyEntity.url = ''
  modifyEntity.projectId = route.query.id
}
const confirmModify = () => {
  if (modifyEntity.id === '') {
    pageStore.addProjectPage(modifyEntity)
  } else {
    pageStore.editProjectPage(modifyEntity)
  }
  getList()
  modifyDialogVisible.value = false;
}

const router = useRouter()
const designPage = (page: Page) => {
  router.push({path: '/design', query: {id: page.id}})
}

const deletePage = (page: Page) => {
  pageStore.deleteProjectPage(page.id)
  getList()
}

const exportProject = () => {
    pages.value.forEach((page) => {
      generatePage(page)
    })
}

const generatePage = (page: Page) => {
  
}

</script>

<style scoped>
  .project-detail-container {
    width: 100%;
    height: 100%;
    padding: 20px;
  }
  .project-detail-title {
    display: inline-block;
    height: 32px;
    line-height: 32px;
    font-weight: 600;
    font-size: 22px;
    margin-right: 16px;
  }
  .project-detail-title-btn {
    display: inline-block;
    vertical-align: bottom;
  }
</style>
